<template>
    <div class="app-container" v-loading="loadings">
        <!-- 基础信息 -->
        <h5 class="titleInfo">基础信息</h5>
        <el-form :inline="true" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名">
                        <span class="spanToInput">{{listData.nickname}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号">
                        <span class="spanToInput">{{listData.username}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <span class="spanToInput">{{listData.sex | sexType}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生年月">
                        <span class="spanToInput">{{listData.birthday}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="测评时间">
                        <span class="spanToInput">{{listData.recordTime}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 医院信息 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">医院信息</h5>
        <el-form ref="list1" :inline="true" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="医院信息">
                        <span class="spanToInput">{{listData.hospitalAddress}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 报告内容 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">报告内容</h5>
        <div class="divs">
            <el-tabs type="card">
                <el-tab-pane label="综合">
                    <el-form ref="list" :inline="true" label-width="130px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="综合评分">
                                    <span class="spanToInput">{{listData.score}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="整形建议">
                                    <span class="spanToInput">{{listData.suggest}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="三庭">
                    <div class="tabDiv">
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+threecourt.customerimgurl" alt="">
                        </div>
                        <div class="emptyDiv"></div>
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+threecourt.modelimgurl" alt="">
                        </div>
                        <!-- {{urls+threecourt.customerimgurl}}
                        {{urls+threecourt.modelimgurl}} -->
                    </div>
                    <el-table :data="threecourt.data" style="width: 100%">
                        <el-table-column prop="name" label="测量项目" />
                        <el-table-column prop="length" label="长度" />
                        <el-table-column prop="percent" label="百分比" />
                        <el-table-column prop="state" label="状态" />
                        <el-table-column prop="standard" label="标准" />
                    </el-table>
                    <div class="height"></div>
                </el-tab-pane>
                <el-tab-pane label="五眼">
                    <div class="tabDiv">
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+fivepart.customerimgurl" alt="">
                        </div>
                        <div class="emptyDiv"></div>
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+fivepart.modelimgurl" alt="">
                        </div>
                        <!-- {{urls+fivepart.customerimgurl}}
                        {{urls+fivepart.modelimgurl}} -->
                    </div>
                    <el-table :data="fivepart.data" style="width: 100%">
                        <el-table-column prop="name" label="测量项目" />
                        <el-table-column prop="length" label="长度" />
                        <el-table-column prop="percent" label="百分比" />
                        <el-table-column prop="state" label="状态" />
                        <el-table-column prop="standard" label="标准" />
                    </el-table>
                    <div class="height"></div>
                </el-tab-pane>
                <el-tab-pane label="眼睛">
                    <div class="tabDiv">
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+eyebrow.customerimgurl" alt="">
                        </div>
                        <div class="emptyDiv"></div>
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+eyebrow.modelimgurl" alt="">
                        </div>
                        <!-- {{urls+eyebrow.customerimgurl}}
                        {{urls+eyebrow.modelimgurl}} -->
                    </div>
                    <el-table :data="eyebrow.data" style="width: 100%">
                        <el-table-column prop="name" label="测量项目" />
                        <el-table-column prop="length" label="长度" />
                        <el-table-column prop="percent" label="百分比" />
                        <el-table-column prop="state" label="状态" />
                        <el-table-column prop="standard" label="标准" />
                    </el-table>
                    <div class="height"></div>
                </el-tab-pane>
                <el-tab-pane label="鼻子">
                    <div class="tabDiv">
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+nose.customerimgurl" alt="">
                        </div>
                        <div class="emptyDiv"></div>
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+nose.modelimgurl" alt="">
                        </div>
                        <!-- {{urls+nose.customerimgurl}}
                        {{urls+nose.modelimgurl}} -->
                    </div>
                    <el-table :data="nose.data" style="width: 100%">
                        <el-table-column prop="name" label="测量项目" />
                        <el-table-column prop="length" label="长度" />
                        <el-table-column prop="percent" label="百分比" />
                        <el-table-column prop="state" label="状态" />
                        <el-table-column prop="standard" label="标准" />
                    </el-table>
                    <div class="height"></div>
                </el-tab-pane>
                <el-tab-pane label="嘴巴">
                    <div class="tabDiv">
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+mouth.customerimgurl" alt="">
                        </div>
                        <div class="emptyDiv"></div>
                        <div class="imgDiv">
                            <img style="width:100%" :src="urls+mouth.modelimgurl" alt="">
                        </div>
                        <!-- {{urls+mouth.customerimgurl}}
                        {{urls+mouth.modelimgurl}} -->
                    </div>
                    <el-table :data="mouth.data" style="width: 100%">
                        <el-table-column prop="name" label="测量项目" />
                        <el-table-column prop="length" label="长度" />
                        <el-table-column prop="percent" label="百分比" />
                        <el-table-column prop="state" label="状态" />
                        <el-table-column prop="standard" label="标准" />
                    </el-table>
                    <div class="height"></div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import { plasticReportInfo } from "@/api/plasticReport";

export default {
    name: "plasticReportInfo",
    data() {
        return {
            loadings:true,
            listData: {},
            id:null,
            analysis :null,
            // urls:"https://zkzm-archive-images.oss-cn-shenzhen.aliyuncs.com/",
            urls:"",
            // 三庭
            threecourt:{
                customerimgurl:null,
                modelimgurl:null,
                data:[]
            },
            // 五眼
            fivepart:{
                customerimgurl:null,
                modelimgur:null,
                data:[]
            },
            // 眼睛
            eyebrow:{
                customerimgurl:null,
                modelimgur:null,
                data:[]
            },
            // 鼻子
            nose:{
                customerimgurl:null,
                modelimgur:null,
                data:[]
            },
            // 嘴巴
            mouth:{
                customerimgurl:null,
                modelimgur:null,
                data:[]
            }
        };
    },
    filters: {
        sexType(e) {
            switch (e) {
                case 0:
                    return "保密";
                case 1:
                    return "男";
                case 2:
                    return "女";
            }
        }
    },
    mounted() {
        this.id = Number(this.$route.query.userId)
        this.getList({id:this.id})
    },
    methods: {
        // 详情获取
        getList(e) {
            const datas = e;
            plasticReportInfo(datas)
                .then(res => {
                   
                    if (!res.data.code) {
                        this.listData = res.data.data;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                    this.analysis = JSON.parse(this.listData.analysis)
                    console.log(this.analysis)
                    for(var key in this.analysis){
                        if(this.analysis[key].name == "threecourt" || this.analysis[key].name == "三庭"){
                            this.threecourt = this.analysis[key]
                        }
                        if(this.analysis[key].name == "fivepart" || this.analysis[key].name == "五眼"){
                            this.fivepart = this.analysis[key]
                        }
                        if(this.analysis[key].name == "eyebrow" || this.analysis[key].name == "眼睛"){
                            this.eyebrow = this.analysis[key]
                        }
                        if(this.analysis[key].name == "nose" || this.analysis[key].name == "鼻子"){
                            this.nose = this.analysis[key]
                        }
                        if(this.analysis[key].name == "mouth" || this.analysis[key].name == "嘴巴"){
                            this.mouth = this.analysis[key]
                        }
                    }
                    // console.log(this.mouth);
                    this.loadings = false
                })
                .catch(error => {
                    this.loadings = false
                    this.$message.error(error);
                });
        },
    }
};
</script>
<style scoped>
.app-container {
    padding: 0px !important;
}
.divs{margin: 0 20px}
.height{height:20px}
.imgDiv{display:block;width:49%;float:left;overflow: hidden;}
.emptyDiv{display:block;width:2%;float:left;height: 1px;}
.tabDiv{margin-bottom: 20px;float: left;width: 100%}
</style>